<template>
  <div class="root">
    <div class="item" v-for="(item, index) in commentList" :key="index">
      <div class="head">
        <img :src="item.user.head_img" alt />
        <div>
          <p>{{ item.user.nickname }}</p>
          <span>{{ item.user.create_date }}</span>
        </div>
        <span @click="replyFn(item.id)">回复</span>
      </div>
      <commentItem
        @updateComment="replyFn"
        v-if="item.parent"
        :obj="item.parent"
      ></commentItem>
      <div class="text">{{ item.content }}</div>
    </div>
    <footComment
      @updateCommentList="dynamicUpdate"
      ref="foot"
      :obj="obj"
      :parent_id="parent_id"
    ></footComment>
  </div>
</template>

<script>
import commentItem from "@/views/commentItem.vue";
import footComment from "@/components/footComment.vue";
import { newsDetails, getCommentList } from "@/apis/get.js";
export default {
  data() {
    return {
      obj: {},
      commentList: [],
      parent_id: "",
    };
  },
  created() {
    this.dynamicUpdate();
  },
  components: { footComment, commentItem },
  methods: {
    // 回复
    replyFn(id) {
      this.parent_id = id;
      this.$nextTick(() => {
        this.$refs.foot.handlerFocus();
      });
    },
    // 动态更新
    dynamicUpdate() {
      let id = this.$route.query.id;
      newsDetails(id).then((res) => {
        // console.log(32, res);
        this.obj = res.data.data;
      });
      // 评论信息
      getCommentList(id).then((res) => {
        // console.log(33, res);
        this.commentList = res.data.data;
        // console.log(33, this.commentList);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.root {
  margin-bottom: 100px;
  padding: 10px;
}
.item {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > img {
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      display: block;
      border-radius: 50%;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span {
        font-size: 12px;
        color: #999;
        line-height: 25px;
      }
    }
    > span {
      color: #999;
      font-size: 13px;
    }
  }
  .text {
    font-size: 14px;
    color: #333;
    padding: 20px 0 10px 0;
  }
  .commentItem {
    border: 1px solid #ccc;
    padding: 5px;
    margin-top: 10px;
    .top {
      font-size: 12px;
      color: #aaa;
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      font-size: 13px;
      line-height: 40px;
    }
  }
}
</style>